<script setup>
import { useVModel } from "@vueuse/core";

const props = defineProps({
  appendToBody: {
    type: Boolean,
    default: false
  },
  lockScroll: {
    type: Boolean,
    default: true
  },
  width: {
    type: [String, Number],
    default: "50%"
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showFullscreen: {
    type: Boolean,
    default: false
  },
  draggable: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(["update:modelValue"]);

const dialogVisible = useVModel(props, "modelValue", emit);
// const isFullscreen = ref(false)

// const closeDialog = () => {
//   dialogVisible.value = false
// }
// const setFullscreen = () => {
//   isFullscreen.value = !isFullscreen.value
// }
</script>

<template>
  <div class="vab-dialog">
    <el-drawer
      v-model="dialogVisible"
      :append-to-body="appendToBody"
      direction="rtl"
      :lock-scroll="lockScroll"
      :show-close="showClose"
      :size="width"
      :title="title"
    >
      <template #header>
        <slot name="header"></slot>
      </template>
      <div v-loading="loading">
        <slot></slot>
      </div>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped></style>
